<template>
  <div class="index-page" id="indexPage">
    <section class="section-1" data-aspm="landing">
      <div>
        <h1>飞雀图表</h1>
        <p>零代码在线制作近50种图表，随意自由组合成可视化看板</p>
        <router-link to="/dashboard">
          <a-button type="primary" size="large">立即制作可视化看板 <ArrowRightOutlined /></a-button>
        </router-link>
      </div>
    </section>
    <a class="record" href="https://beian.miit.gov.cn" target="_blank">湘ICP备2021012803号</a>
  </div>
</template>
<script>
import { ArrowRightOutlined } from '@ant-design/icons-vue';
import CanvasNest from 'canvas-nest.js';

export default {
  components: {
    ArrowRightOutlined,
  },
  mounted() {
    const config = {
      color: '24,144,255',
      count: 180,
      zIndex: 1
    };
    this.canvasNest = new CanvasNest(document.getElementById('indexPage'), config);
  },

  beforeUnmount () {
    this.canvasNest && this.canvasNest.destroy()
  }
}
</script>
<style lang="scss">
.index-page {
  height: calc(100vh - 54px);
  width: 100%;
  position: relative;
  .record {
    position: absolute;
    font-size: 12px;
    bottom: 10px;
    left: 50%;
    cursor: pointer;
    margin-left: -60px;
  }
}
.section-1 {
  height: 519px;
  overflow: hidden;
  position: relative;
  div {
    position: relative;
    padding-top: 200px;
    padding-left: 200px;
    height: 100%;
    z-index: 2;
    max-width: 673px;
    h1 {
      font-size: 44px;
      color: rgba(0,0,0,.85);
      letter-spacing: 0;
      line-height: 52px;
      margin-bottom: 32px;
    }
    p {
      font-size: 18px;
      line-height: 26px;
      color: rgba(0,0,0,.65);
      font-weight: 300;
      margin-bottom: 32px;
    }
  }
}
</style>